<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .head{
            position: relative;
            width: 1200px;
            height: 89.5px;
            margin: 0 auto;
        }
        .head>img{
            position: absolute;
            top: 25px;
            left: 0px;

        }
        .head .input{
            outline: 1px solid red;
            background-color: #FEF2F2;
            text-align: center;
            line-height: 28px;
            font-size: 12px;
            position: absolute;
            top: 25px;
            right: 96px;
            width: 900px;
            height: 28px;           
        }
        .head a{
            display: inline-block;
            text-align: right;
            color: #6c6c6c;
            text-decoration: none;
            font-size: 12px;
            font-family:Arial, 微软雅黑;
            position: absolute;
            bottom: 5px;
            right: 0px;
        }
        .head a img{
            vertical-align: middle;
        }
        .head a:hover{
            color: red;
        }

        .body{
       
            background: url(img/banner.jpg) no-repeat 50% 50%;
            height: 600px;

          
            
            
        }
        .body1{
            padding-top: 120px;
            width: 1200px;
           margin: 0 auto;
          
        }
        .body .right{
            box-sizing: border-box;
           float: right;
            width: 350px;
            height: 369.5px;
            top: 120px;
            right: 0px;
            background-color: white;
            padding: 35px 25px 0px 25px;
        }
        .ra h4{
        padding-bottom: 28px;
        }
        .ra .pa,.ra .pb{
            width: 300px;
            height: 42px;
            margin-bottom: 20px;
            
        }
        
       
        .ra .pa input{
            background: url(img/user_icon.png) no-repeat ;
            padding-left: 48px;
            border:1px solid #dddddd;
            outline: none;
            height: 40px;
            width: 252px;
            vertical-align: top;
            
            
        
        }
        .ra .pb input{
            background: url(img/pass_icon.png) no-repeat ;
            border:1px solid #dddddd;
            outline: none;
            height: 40px;
            width: 252px;
            padding-left: 48px;
        }
        .ra .pc{
            background-color: #FF4400;
            height: 42px;
            width: 300px;
            border-radius: 3px;
            text-align: center;
            font-size: 16px;
            font-weight: bold;
            line-height: 40px;
            color: white;
            margin-bottom: 24px;
        }
        
        .ra .pd {
            margin-bottom:24px ;
        }
        .ra .pd img{
            vertical-align: middle;
        }
        .ra .pd a{

            font-size: 12px;
            text-decoration: none;
            vertical-align:middle;
            color: #6c6c6c;
        }
        .ra .pd a:hover{
            color: #FF4400;
        }
        .ra .pe{
            margin-bottom: 27px;
            text-align: right;
        }
        .ra .pe a{
            font-size: 12px;
            color: #6c6c6c;
            text-decoration: none
        }
        .ra .pe a:hover{
            color: #FF4400;
        }
        .foot{
            padding: ;
            width: 1200px;
            height: 210px;
            margin: 0 auto ;
            padding-top:60px ;
            
        }
        .foot .fa{
            margin-top:60x;
            height: 42px;
            font-size: 12px;
            border-top: 1px solid #DDDDDD;
            border-bottom: 1px solid #DDDDDD;
        }
        .fa li {
            display: inline-block;
           line-height: 42px;
            width:auto
        }
        .fa span{
            display: inline-block;
            padding: 0px;
            width: 13px;
            height: 15px;
        }
        .fa li a{
            text-decoration: none;
            color: #6c6c6c;
        }
        .fa li a:hover{
            color: #FF4400;
        }
        .fb li{
            display: inline-block;
            line-height: 42px;
            width:auto;
            font-size: 12px;
        }
        .fb li a{
            text-decoration: none;
            color: #6c6c6c;
        }
        .fb li a:hover{
            color: #FF4400;
        }


        
        
           
        

    </style>
</head>
<body>
    <!-- 头部 -->
    <div class="head">
        <img src="img/logo.png" alt="淘宝网">
        <p class="input" style="color:  #6c6c6c;">为确保您账户的安全及正常使用，依《网络安全法》相关要求，6月1日起会员账户需绑定手机。如您还未绑定，请尽快完成，感谢您的理解及支持！</p>
         <a href="#"><img  src="img/icon1.png"> "登录页面"改进建议</a>
    </div>
    <!-- 主体 -->
    <div class="body">
        <div class="body1">
        <div class="right">
            <div class="ra">
                <h4>密码登录</h4>
                <p class="pa"><imgsrc="img/user_icon.png" alt="user"><input placeholder="会员名/邮箱/手机号" type="text"></p>
                <p class="pb"><input type="password"></p>
                <p class="pc">登录</p>
                <p class="pd">
                    <a href="#"><img  src="img/icon2.png"> 微博登陆</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="#"><img  src="img/icon3.png">支付宝登录</a>
                </p>
                <p class="pe">
                    <a href="#">忘记密码</a>
                    <a href="#">忘记会员名</a>
                    <a href="3">免费注册</a>

                </p>
            </div>
        </div>
    </div>

    </div>
    <!-- 脚 -->
    <div class="foot">
        <div class="fa">
            <ul>
                <li><a href="#">阿里巴巴集团</a><span>丨</span></li>
                <li><a href="#">阿里巴巴国际站</a><span>丨</span></li>
                <li><a href="#">阿里巴巴中国站</a><span>丨</span></li>
                <li><a href="#">全球速卖通</a><span>丨</span></li>
                <li><a href="#">淘宝网</a><span>丨</span></li>
                <li><a href="#">天猫</a><span>丨</span></li>
                <li><a href="#">聚划算</a><span>丨</span></li>
                <li><a href="#">一淘</a><span>丨</span></li>
                <li><a href="#">阿里妈妈</a><span>丨</span></li>
                <li><a href="#">飞猪</a><span>丨</span></li>
                <li><a href="#">虾米</a><span>丨</span></li>
                <li><a href="#">阿里云计算</a><span>丨</span></li>
                <li><a href="#">云OS</a><span>丨</span></li>
                <li><a href="#">万网</a><span>丨</span></li>
                <li><a href="#">支付宝</a><span>丨</span></li>
                <li><a href="#">来往</a></li>
            </ul>
        </div>
        <div class="fb">
            <ul>
                <li><a href="#">关于淘宝</a></li>
                <li><a href="#">合作伙伴</a></li>
                <li><a href="#">营销中心</a></li>
                <li><a href="#">廉正举报</a></li>
                <li><a href="#">联系客服</a></li>
                <li><a href="#">开放平台</a></li>
                <li><a href="#">诚征英才</a></li>
                <li><a href="#">联系我们</a></li>
                <li><a href="#">网站地图</a></li>
                <li><a href="#">法律声明及隐私权政策</a></li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <li style="font-size: 12px;color: #9C9C9C;">© 2018 Taobao.com 版权所有</li>
            </ul>
            <p style="font-size: 12px;color: #9C9C9C;">网络文化经营许可证：浙网文 [2016]0132-032 号 | 增值电信业务经营许可证：浙B2-20080224-1 | 信息网络传播视听节目许可证：1109364号</p>
            <div><img src="img/wj.gif" alt=""></div>
        </div>


    </div>


    
</body>
</html>